﻿@{
    ViewBag.Title = "BuyService";
    Layout = "~/Views/Shared/_Layout_iframe.cshtml";
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服务购买</title>
    <style>
        body {
            padding: 20px;
            background-color: #f5f7fa;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

        .layui-form {
            max-width: 800px;
            margin: 0 auto;
            background: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .layui-form-label {
            width: 120px;
            font-weight: 500;
            color: #555;
        }

        .layui-input-block {
            margin-left: 150px;
        }

        .layui-input {
            border-radius: 4px;
            border: 1px solid #e6e6e6;
            transition: all 0.3s;
            background-color: #f9f9f9;
        }

            .layui-input:focus {
                border-color: #5FB878;
                box-shadow: 0 0 0 3px rgba(95, 184, 120, 0.1);
            }

        .service-details {
            display: none; /* 初始隐藏详情部分 */
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px dashed #eee;
        }

        .form-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 25px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .form-footer {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #eee;
            text-align: center;
        }
        .date-status {
            display: inline-block;
            margin-left: 10px;
            vertical-align: middle;
        }

        .status-valid {
            color: #5FB878;
        }

        .status-invalid {
            color: #FF5722;
        }

        .date-input-container {
            position: relative;
        }

        .date-status-icon {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="layui-form">
        <h2 class="form-title">服务购买</h2>

        <!-- 服务选择部分 -->
        <div class="layui-form-item">
            <label class="layui-form-label">服务名称</label>
            <div class="layui-input-block">
                <select name="service" lay-filter="serviceSelect" lay-verify="required">
                    <option value="">请选择服务...</option>
                    @foreach (var service in ViewBag.Service)
                    {
                        <option value="@service.Id">@service.ServiceName</option>
                    }
                </select>
            </div>
        </div>

        <!-- 服务详情部分 (初始隐藏) -->
        <div id="serviceDetails" class="service-details">
            <div class="layui-form-item">
                <label class="layui-form-label">服务类型</label>
                <div class="layui-input-block">
                    <input type="text" name="ServiceType" readonly class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">服务价格</label>
                <div class="layui-input-block">
                    <input type="text" name="price" readonly class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">服务实施时间</label>
                <div class="layui-input-block date-input-container">
                    <input type="text" name="date" id="date" lay-verify="required|date" placeholder="请选择日期" autocomplete="off" class="layui-input">
                    <span class="date-status-icon" id="dateStatusIcon" style="display: none;"></span>
                </div>
            </div>

            <div class="form-footer">
                <button type="submit" class="layui-btn layui-btn-normal" lay-submit lay-filter="formSubmit">确认购买</button>
                <button type="reset" class="layui-btn layui-btn-primary" id="cancelBuy">取消</button>
            </div>
            <input type="hidden" id="hfServiceId" />
            <input type="hidden" id="hfContractId" value="@ViewBag.ContractId" />
        </div>
    </div>

    <script>
        layui.use(['form', 'laydate'], function () {
            var form = layui.form,
                laydate = layui.laydate,
                layer = layui.layer,
                $ = layui.$;

            // 初始化日期选择器
            laydate.render({
                elem: '#date',
                theme: '#5FB878',
                done: function (value) {
                    var ServiceId = $('#hfServiceId').val()
                    // 显示加载中
                    var loadIndex = layer.load(1);
                    $.post("/Room/Service", { Id: ServiceId, value: value }, function (resp) {
                        layer.close(loadIndex);
                        var $dateStatusIcon = $('#dateStatusIcon');
                        if (resp.code == 0) {
                            // 添加成功状态 - 绿色对勾
                            $dateStatusIcon.show().html('<i class="layui-icon layui-icon-ok-circle status-valid"></i>');
                            layer.msg('该时间段可用', { icon: 1 });
                        } else {
                            // 添加失败状态 - 红色错误
                            $dateStatusIcon.show().html('<i class="layui-icon layui-icon-close-fill status-invalid"></i>');
                            layer.msg('该时间段不可用: ', { icon: 2 });
                            $('#date').val(''); // 清空不可用的日期
                        }
                    })
                }
            });

            // 服务选择变化事件
            form.on('select(serviceSelect)', function (data) {
                var ServiceId = data.value;
                if (data.value === '') {
                    // 如果选择的是"请选择服务..."
                    $('#serviceDetails').hide();
                } else {
                    $('#hfServiceId').val(ServiceId)
                    // 填充服务详情并显示
                    $.post("/Room/GetService/" + ServiceId, function (resp) {
                        if (resp.code == 0) {
                            // 服务类型映射 (1=宝宝服务, 2=美容服务, 3=护理服务)
                            var typeMapping = {
                                '1': '宝宝服务',
                                '2': '美容服务',
                                '3': '护理服务'
                            };
                            // 获取服务类型文本，如果未定义则使用原始值
                            var serviceTypeText = typeMapping[resp.data.ServiceType] || resp.data.ServiceType;
                            $('input[name="ServiceType"]').val(serviceTypeText);
                            $('input[name="price"]').val(resp.data.ServicePrice);
                            $('#serviceDetails').slideDown();
                        }
                    })
                }
            });

            // 表单提交
            form.on('submit(formSubmit)', function (data) {
                layer.msg('提交中...', { icon: 16, time: 1000 }, function () {
                    var ContractId = $('#hfContractId').val()
                    data.field.ContractId = ContractId
                    console.log(data.field)
                    $.post('/Room/PurchaseService', { productData: encodeURIComponent(JSON.stringify(data.field)) }, function (res) {
                        if (res.code==0) {
                            layer.msg('购买成功!', { icon: 1 });
                            // 关闭当前 iframe 窗口
                            var index = parent.layer.getFrameIndex(window.name); // 获取当前 iframe 的索引
                            parent.layer.close(index); // 关闭当前 iframe
                            // 刷新父页面
                             parent.location.reload();
                        } else {
                            layer.msg(res.message || '购买失败', { icon: 2 });
                        }
                    });
                });
                return false; // 阻止表单跳转
            });
            // 取消按钮事件
            $('#cancelBuy').on('click', function () {
                $('#serviceDetails').hide();
                $('select[name="service"]').val(''); // 设置值为空
                form.render('select'); // 重新渲染select，使更改生效
            });
        });
    </script>
</body>
</html>